<template>
  <div style="margin-top: 20px">
    <el-button type="primary" @click="importTable">导入</el-button>
    
    <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])">
      Toggle selection status of second and third rows
    </el-button>
    <el-button @click="toggleSelection()">Clear selection</el-button> -->
  </div>
  <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
    <el-table-column type="selection" width="55" />
    <el-table-column property="0" label="序号" width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>

    <!-- <el-table-column property="0" label="序号"  /> -->
    <el-table-column
      header-align="center"
      type="index"
      label="序号"
      width="60"
    ></el-table-column>
    <el-table-column
      header-align="center"
      prop="licensePlate"
      label="车牌"
      width="150"
    ></el-table-column>
    <el-table-column
      header-align="center"
      prop="constructionUnit"
      label="施工单位"
      width="150"
    ></el-table-column>
    <el-table-column
      header-align="center"
      prop="freeTimeStart"
      label="免费开始时间"
      width="110"
    ></el-table-column>
    <el-table-column
      header-align="center"
      prop="freeTimeEnd"
      label="免费结束时间"
      width="110"
    ></el-table-column>
    <el-table-column
      header-align="center"
      prop="freeSection"
      label="免费区间"
      width="150"
    ></el-table-column>
    <el-table-column
      header-align="center"
      prop="vehicleType"
      label="车辆类型"
      width="180"
    ></el-table-column>

    <el-table-column
      header-align="center"
      prop="theValidityPeriodOfTheAnnualInspectionOfTheVehicle"
      label="车辆年检有效期"
      width="160"
    ></el-table-column>
    <el-table-column
      header-align="center"
      prop="validityPeriodOfVehicleInsurance"
      label="车辆保险有效期"
      width="160"
    ></el-table-column>
    <el-table-column
      header-align="center"
      show-overflow-tooltip
      prop="updatedDate"
      label="更新日期"
      width="160"
    ></el-table-column>
    <el-table-column
      header-align="center"
      show-overflow-tooltip
      prop="remark"
      label="备注"
      width="80"
    ></el-table-column>
    <!-- <el-button type="primary" @click="importTable">导入</el-button> -->
  </el-table>
</template>

<script setup name="mainContent">
import * as xlsx from 'xlsx'
import { ref } from 'vue'
const tableData = ref([])


const importTable = () => {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = '.xlsx, .xls'
  input.onchange = e => {
    const file = e.target.files[0]
    const reader = new FileReader()
    reader.onload = e => {
      const data = e.target.result
      const workbook = xlsx.read(data, { type: 'binary' })
      const sheetName = workbook.SheetNames[0]
      const worksheet = workbook.Sheets[sheetName]
      const tableDataFFF = xlsx.utils.sheet_to_json(worksheet, { header: 1 })
      const tableHead = tableDataFFF.shift()
      // tableDataFFF.shift()
      // tableDataFFF.shift()
      // tableDataFFF.forEach((item, key) => {
      //   console.log(key)
      //   console.log(item)
      //   // return item
      //   return item.forEach(function jj(v,k) {
      //     switch (k) {
      //     case 1:
      //       k = '施工单位'
      //       console.log(k)
      //       break
      //     case 2:
      //       k = '车牌'
      //       break
      //     case 3:
      //       k = '免费时间'
      //       break
      //     case 4:
      //       k = '免费区间'
      //       break
      //     case 5:
      //       k = '车辆年检有效期'
      //       break
      //     case 6:
      //       k = '车辆保险有效期'
      //       break
      //     case 7:
      //       k = '车辆类型'
      //       break
      //     case 8:
      //       k = '更新日期'
      //       break
      //     case 9:
      //       k = '备注'
      //       break
      //     default:
      //       break
      //   }
      //   })
      // })
      console.log(tableDataFFF)
      tableData.value = tableDataFFF
      sessionStorage.setItem('freeCarList-excel', JSON.stringify(tableDataFFF))
      sessionStorage.setItem(
        'freeCarList-excel-head',
        JSON.stringify(tableHead)
      )
      console.log(tableData)
    }
    reader.readAsBinaryString(file)
  }
  input.click()
}
</script>
